<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="../js/vue.js"></script>
    <style>
        .normal {
            background-color: red;
        }

        [v-cloak] {
            /*给尚未加载到Vue的元素临时获取css   获取Vue后失效  避免网速慢时出现{{}}  */
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div id="root">
    <h1>{{name}},{{school.name}}</h1>
    <a v-bind:href="url">超链接1</a>
    <a :href="url.toUpperCase()">超链接2</a> <br><!-- v-bind简写 -->
    <input type="text" v-model="inputTest"> <br><!--双向绑定-->
    <button v-on:click="showInfo">点击的提示信息</button>
    <!-- .stop阻止事件冒泡  .once时间只触发一次  .capture使用事件的捕获模式
         .self只有event.target时触发 .passive默认行为立即执行(不使用则先函数后页面更改)-->
    <input type="text" placeholder="按下回车显示输入" @keyup.enter="showInfo2">
    <!-- ctrl alt shift meta
         keyup时需同时按下其他键后释放其他键
         keydown正常触发-->
    <a>{{fullName}}</a>
    <div v-bind:class="a" @click="changeMood">{{name}}</div>
    <div :style="fsize">style</div>
    <div v-show="true">v-show是否可见</div>
    <div v-if="1===1">v-if</div>
    <div v-else-if="1===1">else-if</div>
    <div v-else>else</div>
    <template><!-- 保存原结构 -->

    </template>
    <input type="text" placeholder="请输入过滤名" v-model="keyWord">
    <ul>
        <li v-for="person in persons" key="person.id">
            {{person.id}} -- {{person.name}}
        </li>
        <li v-for="(person,index) in persons" key="index"> <!-- 使用index时不要破坏内部数据顺序 -->
            {{person.id}} -- {{person.name}}
        </li>
        <li v-for="person in filPersons" key="person.id">
            {{person.id}} -- {{person.name}}
        </li>
    </ul>
    <button @click="sortType = 2">年龄升序</button>
    <button @click="sortType = 1">年龄降序</button>
    <h1>{{time|timeFormater}}</h1><!-- time传进timFormater -->
    <div v-text=""></div>
    <div v-html=""></div>
    <div v-cloak></div>
    <div v-once>{{number1}}</div><!-- 保持初次动态渲染后保持原始值 -->
    <div v-pre>{{number1}}</div><!-- Vue跳过其内容进行 -->
    <span v-text="n"></span>
    <span v-big="n"></span><!-- 自定义标签 -->
    <input type="text" v-fBing:value="n">
</div>
<script type="application/javascript">
    // Vue.config.keyCode.testA = 11    //自定义按键别名
    // Vue.filter('mySlice',function (){    }  //全局过滤器

    //创建Vue实例
    //Vue与容器只能一对一
    const v = new Vue({
        el: '#root', //声明
        /* template:`
           <div>
           模板内
           </div>`,  */
        data: {
            name: "人名",
            url: "www",
            school: {
                name: "学校名"
            },
            inputTest: "",
            a: 'normal',  //css样式
            arr: ['a', 'b', 'c'],
            fsize: {
                fontSize: 40 + 'px'
            },
            persons: [
                {id: 1, name: 'aaa'},
                {id: 2, name: 'bbb'},
                {id: 3, name: 'ccc'},
            ],
            filPersons: []
            , sortType: 0,
            time: 1621561377603,
            number1: 1,
            n: 1,
            opacity: 1
        },
        data: function () {
            console.log('@@@', this) //this是Vue实例对象
            return {
                name: "人名2"
            }
        },
        methods: {
            showInfo() {
                alert('adsfffff')
            },
            showInfo2(e) {
                console.log(e.target.value)
            },
            changeMood() {
                this.a = 'happy'
            }
        },
        computed: { //计算属性 //不可异步任务( 无法setTimeOut
            fullName: {
                //初次读取调用get  所依赖数据更改时调用get
                get() {
                    return this.name + "-" + this.school.name
                },
                //当fullName被修改时调用
                set(value) {
                    alert("fullName已被修改为:" + value)
                }
            },
            //只用get时可简写(不修改)
            fullName: function () {
                return this.name + "-" + this.school.name
            },
            filePersons() {
                const arr = this.persons.filter((p) => {
                    return p.name.indexOf(this.keyWord) !== -1
                })
                if (this.sortType) {
                    arr.sort((p1, p2) => {
                        return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                    })
                }
                return arr
            }
        },
        watch: {
            isHot: {
                immediate: true, //初始化时调用handler
                //修改时触发handler()
                handler(newValue, oldValue) {
                    console.log(newValue, oldValue)
                }
            },
            'school.name': {
                deep: true, //监测多层级
                handler(newValue, oldValue) {
                }
            },
            isHot(newValue, oldValue) { //只用handler可简写
                console.log()
            },
            keyWord: {
                immediate: true,
                handler(value) {
                    this.filPersons = this.persons.filter((person) => {
                        return person.name.indexOf(value) !== -1
                    })
                }
            }

        },
        filters: {
            timeFormater() {
                //可以进行格式化任务
            }
        },
        directives: {
            //自定义多单词v-big-number
            //指令中this指向window
            big: function (element, binding) {
                console.log(element, binding.value)  //binding指绑定的span
                element.innerText = binding.value * 10
            },
            fBind: {
                //指令与元素绑定时调用
                bind(element, binding) {
                    element.value = binding.value
                },
                //指令所在元素被插入页面时调用
                inserted(element, binding) {
                },
                //指令所在模板被重新解析时调用
                update(element, binding) {
                    element.value = binding.value
                }
            }
        },
        //单独写出来的是生命周期函数
        beforeCreate() {
        },
        created() {
        },
        beforeMount() {
        },
        mounted() {
            // Vue完成模板的的解析并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted
            // this指向vm
            setInterval(() => {
                this.opacity -= 0.01
                if (this.opacity <= 0) this.opacity = 1
            }, 16)
        },
        onBeforeUpdate() {
        },


    })
    v.$mount('#root') //挂载

    let person = {
        name: 'a'
    }
    let sex = '男'
    Object.defineProperty(person, 'age', {
        value: 18,
        enumerable: true,  //控制属性是否可以枚举
        writable: true, //属性是否可以修改
        configurable: true,//是否可以删除

        get: function () {// 随age而调用
            return 'hello'
        },
        set: function (value) {// 随age而调用
            sex = value
        }
    })


</script>
</body>
</html>